<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter/vxe-table';

import { ref } from 'vue';

import { Page, useVbenModal } from '@vben/common-ui';

import { Button, message, Popconfirm, Tag } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteMenuApi, getMenuPageApi } from '#/api';

import Create from './handle/create.vue';

const name = '菜单';

const isExpand = ref(false);

const gridOptions: VxeGridProps<VxeGridProps> = {
  columns: [
    {
      field: 'name',
      title: '菜单名称',
      treeNode: true,
      align: 'left',
      // slots: {
      //   default: ({ row }) => {
      //     return row.icon
      //       ? h('span', {}, [
      //           h(Icon, {
      //             icon: row.icon,
      //           }),
      //           h(
      //             'span',
      //             {
      //               style: {
      //                 paddingLeft: '6px',
      //               },
      //             },
      //             row.name,
      //           ),
      //         ])
      //       : h('span', {}, row.name);
      //   },
      // },
    },
    { field: 'perms', title: '权限标识' },
    {
      field: 'type',
      title: '菜单类型',
      slots: {
        default: 'type',
      },
    },
    { field: 'path', title: '路由/接口' },
    { field: 'created_at', formatter: 'formatDateTime', title: '创建时间' },
    {
      field: 'action',
      fixed: 'right',
      title: '操作',
      width: 200,
      slots: {
        default: 'action',
      },
    },
  ],
  // 单元格内容发生变化，原始值保留
  keepSource: true,
  toolbarConfig: {
    refresh: true, // 刷新
    print: false, // 打印
    export: false, // 导出
    zoom: true, // 最大化最小化
    slots: {
      buttons: 'toolbar-actions',
    },
  },
  // 分页配置
  pagerConfig: {
    // 显示分页
    enabled: false,
  },
  // 树形关联字段配置
  treeConfig: {
    rowField: 'id',
    parentField: 'pid',
    childrenField: 'children',
  },
  // 数据请求
  proxyConfig: {
    response: {
      // 响应结果中获取数据列表的属性（不分页场景）
      list: '',
    },
    ajax: {
      query: async () => {
        return await getMenuPageApi();
      },
    },
  },
};

// 新增编辑弹出表单组件
const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: Create,
});

const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });

// 展开/折叠
const handleExpandAndCollapse = () => {
  const newExpandState = !isExpand.value;
  gridApi.grid.setAllTreeExpand(newExpandState);
  isExpand.value = newExpandState;
};

// 新增编辑弹出表单方法
function handleSave(action: string, row: any) {
  const record = action === 'edit' ? row : {};
  const title = action === 'edit' ? `编辑${name}` : `新增${name}`;
  const pid = action === 'add' ? row : null;
  formModalApi.setData({
    record,
    gridApi,
    pid,
  });
  formModalApi.setState({
    title,
  });
  formModalApi.open();
}

// 删除数据方法
function handleDelete(id: string) {
  deleteMenuApi(id).then(() => {
    message.success(`删除${name}成功`);
    gridApi.reload();
  });
}
</script>

<template>
  <Page>
    <Grid>
      <template #type="{ row }">
        <Tag v-if="row.type === 1" color="pink">菜单</Tag>
        <Tag v-else color="blue">接口</Tag>
      </template>
      <template #toolbar-actions>
        <Button class="mr-2" type="primary" @click="handleSave('add')">
          新增
        </Button>
        <Button class="mr-2" type="primary" @click="handleExpandAndCollapse">
          {{ isExpand ? '折叠全部' : '展开全部' }}
        </Button>
      </template>
      <template #action="{ row }">
        <Button size="small" type="link" @click="handleSave('add', row.id)">
          添加下一级
        </Button>
        <Button size="small" type="link" @click="handleSave('edit', row)">
          编辑
        </Button>
        <Popconfirm
          cancel-text="取消"
          ok-text="确认"
          title="确认删除此数据吗"
          @confirm="handleDelete(row.id)"
        >
          <Button danger size="small" type="link">删除</Button>
        </Popconfirm>
      </template>
    </Grid>
    <FormModal />
  </Page>
</template>
